<template>
  <el-container class="admin-layout">
    <el-aside width="220px" class="admin-sidebar">
      <div class="logo">
        <span>美食外卖管理端</span>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="admin-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/admin/dashboard">
          <i class="el-icon-s-home"></i>
          <span slot="title">仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/admin/restaurant">
          <i class="el-icon-s-shop"></i>
          <span slot="title">餐厅管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/dish">
          <i class="el-icon-dish"></i>
          <span slot="title">菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/order">
          <i class="el-icon-s-order"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/user">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container class="admin-main">
      <el-header class="admin-header">
        <div class="left">
          <i class="el-icon-s-fold toggle-sidebar"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ getBreadcrumbTitle() }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="right">
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="avatar-wrapper">
              <el-avatar :size="30" :src="userInfo.avatar"></el-avatar>
              <span class="user-name">{{ userInfo.username }}</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-main class="admin-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'AdminLayout',
  data() {
    return {
      userInfo: {}
    }
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'isAdmin']),
    activeMenu() {
      return this.$route.path
    }
  },
  created() {
    // 检查用户是否登录和是否是管理员
    if (!this.isLoggedIn || !this.isAdmin) {
      this.$router.push('/login')
      return
    }
    
    this.getUserInfo()
  },
  methods: {
    ...mapActions(['logout']),
    getUserInfo() {
      this.$http.get('/user/info')
        .then(response => {
          this.userInfo = response.data.data
          
          // 如果不是管理员，跳转到首页
          if (this.userInfo.role !== 'admin') {
            this.$message.error('您没有管理员权限')
            this.$router.push('/')
          }
        })
        .catch(() => {
          this.$router.push('/login')
        })
    },
    handleCommand(command) {
      if (command === 'profile') {
        // TODO: 显示个人信息
      } else if (command === 'logout') {
        this.logout()
          .then(() => {
            this.$message.success('退出登录成功')
            this.$router.push('/login')
          })
      }
    },
    getBreadcrumbTitle() {
      const path = this.$route.path
      const routeMap = {
        '/admin/dashboard': '仪表盘',
        '/admin/restaurant': '餐厅管理',
        '/admin/dish': '菜品管理',
        '/admin/order': '订单管理',
        '/admin/user': '用户管理'
      }
      return routeMap[path] || '管理中心'
    }
  }
}
</script>

<style scoped>
.admin-layout {
  height: 100vh;
}

.admin-sidebar {
  background-color: #304156;
  height: 100%;
  overflow-x: hidden;
}

.logo {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2b3649;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.admin-menu {
  border-right: none;
}

.admin-main {
  background-color: #f0f2f5;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0 20px;
  height: 60px !important;
}

.admin-header .left {
  display: flex;
  align-items: center;
}

.toggle-sidebar {
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-name {
  margin: 0 5px;
}

.admin-content {
  padding: 20px;
}
</style>
